<template>
  <a-card :bordered="true" class="card-container">
    <a-spin
        tip="处理中..."
        :spinning="processing"
    >
      <a-form-model
          ref="form"
          :model="form"
          :rules="rules"
      >
        <a-row>
          <a-col v-bind="col">
            <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol"
                         label="资产编号">
              <BaseInput type="text" disabled :value="assetNumber"></BaseInput>
            </a-form-item>
          </a-col>
          <a-col v-bind="col">
            <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol"
                         label="资产名称">
              <BaseInput type="text" disabled v-model="form.assetName"></BaseInput>
            </a-form-item>
          </a-col>
          <a-col v-bind="col">
            <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="资产状态">
              <BaseInput disabled :value="mapAssetStatus(form.assetStatus)"></BaseInput>
            </a-form-item>
          </a-col>
          <a-col v-bind="col">
            <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="使用项目">
              <BaseInput type="text" disabled v-model="form.currentProjectName"></BaseInput>
            </a-form-item>
          </a-col>
          <a-col v-bind="singleCol">
            <a-form-item :label-col="{span: 2}" :wrapper-col="{span: 22}"
                         label="型号参数">
              <BaseTextarea :disabled="!isEdit" v-model="form.specification" :maxLength="1000"></BaseTextarea>
            </a-form-item>
          </a-col>

          <a-col v-bind="col">
            <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="品牌">
              <BaseInput type="text" disabled v-model="form.brandName"></BaseInput>
            </a-form-item>
          </a-col>
          <a-col v-bind="col">
            <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="单位">
              <BaseInput  :disabled="!isEdit" v-model="form.unitName"></BaseInput>
            </a-form-item>
          </a-col>
          <a-col v-bind="col">
            <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="价格">
              <BaseInput disabled v-model="form.unitPrice" suffix="元"></BaseInput>
            </a-form-item>
          </a-col>

          <a-col v-bind="col">
            <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="供应商">
              <BaseInput  :disabled="!isEdit" v-model="form.supplierName"></BaseInput>
            </a-form-item>
          </a-col>

          <a-col v-bind="col">
            <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="购买类别">
              <BaseInput disabled :value="mapBuyCatalogue(form.buyCatalogue)"></BaseInput>
            </a-form-item>
          </a-col>
          <a-col v-bind="col">
            <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="资产类别">
              <BaseInput disabled :value="mapAssetCatalogue(form.assetCatalogue)"></BaseInput>
            </a-form-item>
          </a-col>

          <a-col v-bind="col">
            <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="保管人">
              <a-input-search v-model="form.keeperName"
                              :disabled="!isEdit"

                              placeholder="保管人"
                              @click="()=> modal.visible = true"></a-input-search>
              <SelectPerson
                  :visible.sync="modal.visible"
                  mode="single"
                  title="选择保管人"
                  :need-data="modal.visible"
                  :org-id="modal.orgId"
                  :list.sync="modal.list"
                  @getSelectPerson="setSelectPerson($event)"
              />
            </a-form-item>
          </a-col>
          <a-col v-bind="col">
            <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="保管人电话">
              <BaseInput :disabled="!isEdit"
                         v-model="form.keeperPhone"
                         max="11"
                         min="11"
                         type="tel"></BaseInput>
            </a-form-item>
          </a-col>
          <a-col v-bind="col">
            <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol"  label="所属单位">
              <BaseInput disabled :value="form.ownerBranchName"></BaseInput>
            </a-form-item>
          </a-col>

          <a-col v-bind="col">
            <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="所属项目">
              <BaseInput  type="text" disabled v-model="form.ownerProjectName"></BaseInput>
            </a-form-item>
          </a-col>
          <a-col v-bind="col">
            <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="进场时间">
              <BaseInput  disabled :value="formatTime(form.enterTime)"></BaseInput>
            </a-form-item>
          </a-col>
          <a-col v-bind="col">
            <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="报废/丢失时间">
              <BaseInput  disabled :value="formatTime(form.discardTime)"></BaseInput>
            </a-form-item>
          </a-col>
          <a-col v-bind="col">
            <a-form-item :label-col="{span:2}" :wrapper-col="{sm:{span:22},lg:{span:10}}" label="预调拨项目">
              <orgTreeSelect
                :disabled="!isEdit"
                key="preAllotProjectName"
                :auto-selected="false"
                is-maintenance
                allow-clear
                :isHasChildren="false"
                :is-show-project-status="true"
                :is-search-page="true"
                :is-query-projec-detail="false"
                :check-strictly="false"
                :placeholder="form.preAllotProjectName || '无'"
                :need-tags="[]"
                :value="{_checked: form.preAllotProjectId }"
                @select="selectOrg"
              ></orgTreeSelect>
            </a-form-item>
          </a-col>

          <a-col v-bind="col">
            <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="调拨时间">
              <BaseInput  disabled :value="formatTime(form.allotTime)"></BaseInput>
            </a-form-item>
          </a-col>

          <a-col v-bind="col">
            <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="调拨次数">
              <BaseInput disabled v-model="form.allotCount"></BaseInput>
            </a-form-item>
          </a-col>

        </a-row>
        <a-row>
          <a-col v-bind="col2">
            <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol2" label="验收单">
              <span v-if='!form.checkFiles || form.checkFiles.length<=0' class='wu'>-</span>
              <div v-else v-for="(f,index) in form.checkFiles">
                <span class="file">{{ index + 1 }}.</span>
                <FileLink class="file" disabled :fileList="[f]"></FileLink>
                <span class="file"> {{ formatTime(f.createTime) }}</span>
              </div>
            </a-form-item>
          </a-col>
          <a-col v-bind="col2">
            <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol2" label="拆除验收单">
              <span v-if='!form.destroyFiles || form.destroyFiles.length<=0' class='wu'>-</span>
              <div v-else v-for="(f,index) in form.destroyFiles">
                <span class="file">{{ index + 1 }}.</span>
                <FileLink class="file" disabled :fileList="[f]"></FileLink>
                <span class="file"> {{ formatTime(f.createTime) }}</span>
              </div>
            </a-form-item>
          </a-col>
          <a-col v-bind="col2">
            <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol2" label="报废/丢失确认单">
              <div v-if='!form.confirmFiles ||form.confirmFiles.length<=0' class='wu'>-</div>
              <div v-else v-for="(f,index) in form.confirmFiles">
                <span class="file">{{ index + 1 }}.</span>
                <FileLink class="file" disabled :fileList="[f]"></FileLink>
                <span class="file"> {{ formatTime(f.createTime) }}</span>
              </div>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col v-bind="col" :pull="1">
            <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="二维码">
              <div id="qrcode"></div>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row v-if="isEdit">
          <a-col :offset="21">
            <a-button type="primary" @click="submit" :loading="loadingSubmit">提交</a-button>
            <a-button @click="cancel" style="margin-left: 20px">取消</a-button>
          </a-col>
        </a-row>
      </a-form-model>
    </a-spin>
  </a-card>

</template>
<script>
import moment from "moment/moment";
import {
  createQrcode,
  mapAssetCatalogue,
  mapAssetStatus,
  mapBuyCatalogue,
  shareUrl
} from "@/views/materials/assets/material/model";
import SelectPerson from "@/components/Select/SelectPerson.vue";
import {assetManageDetail, updateAssetManageDetail} from "@/api/material/assets/assetManage";
import orgTreeSelect from "@/components/OrgTreeSelect"

export default {
  name: 'AssetManageEdit',
  components: {SelectPerson, orgTreeSelect},
  data() {
    return {
      modal: {
        visible: false,
        orgId: '06bcbdacb4374523bdaf66586c45f749',
        list: []
      },
      processing: false,
      loadingSubmit: false,
      qrCode: null,
      isEdit: true,
      detailId: undefined,
      form: {
        assetNumber: null,
        assetName: null,
        brandName: null,
        ownerOrg: null,
        currentOrg: null,
        unitName: null,
        assetStatus: null,
        totalPrice: null,
        buyCatalogue: null,
        assetCatalogue: null,
        supplierName: null,
        keeperName: null,
        keeperPhone: null,
        allotTime: null,
        allotCount: null,
        preAllotOrg: null,
        discardTime: null,
        qrcode: null,
        checkFiles: [],
        destroyFiles: [],
        confirmFiles: [],
      },


      col: {xs: 24, md: 12, xl: 6,pull:1},
      wrapperCol: {xl: {span: 4}, sm: {span: 22},md:{span: 10}},

      singleCol: {span:24,pull:1},
      labelCol: {xl: {span: 2}, sm: {span: 2}},

      col2: {xs: 24,xl: 8,pull:1},
      wrapperCol2: {xl: {span: 6}, xs: {span: 22}},


      rules: {
        supplierName: [{required: true, message: '请输入供应商名称', trigger: 'blur'}],
      }
    }
  },
  watch: {
    detailId: function (val) {
      if (val) {
        console.log('detailId=', val)
        this.createQrcode(val)
      }
    }
  },
  activated() {
    let edit = this.$route.query.isEdit || 0
    this.isEdit = +edit === 1
    this.form = this.$route.params
    this.detailId = this.$route.query.id

    assetManageDetail(this.detailId)
        .then((res) => {
          if (res.code === '0') {
            //用详情接口更新上门的值，主要是文件列表，其他字段基本一致
            this.form = res.data && res.data.detail && res.data.detail
            this.detailId = res.data && res.data.detail && res.data.detail.id
            this.form.checkFiles = res.data && res.data.files && res.data.files[1]
            this.form.destroyFiles = res.data && res.data.files && res.data.files[2]
            this.form.confirmFiles = res.data && res.data.files && res.data.files[3]
            // console.log('form=',this.form)
          }
        })
  },
  computed: {
    assetNumber: function () {
      return this.form.ownerProjectNum ? (this.form.ownerProjectNum + "-" + this.form.assetNumber) : "-"
    }
  },
  methods: {
    mapAssetCatalogue,
    mapAssetStatus,
    mapBuyCatalogue,
    setSelectPerson(selected) {
      let selectPerson = selected[0]
      this.form.keeperName = selectPerson.name
      this.form.keeperId = selectPerson.userId
      this.form.keeperPhone = selectPerson.phone
    },
    formatTime(time) {
      return time ? moment(time).format('YYYY-MM-DD') : '-'
    },
    createQrcode(val) {
      let url = shareUrl + val
      this.qrCode = this.qrCode || createQrcode(url,document.getElementById('qrcode'))
      this.qrCode?.makeCode(url)
    },
    selectOrg(val) {
      if (val && val.length) {
        const lastValue = val[val.length - 1]
        if (lastValue.tageCode === 'PD' && lastValue.projectId) {
          this.form.preAllotProjectId = lastValue.projectId
          this.form.preAllotProjectName = lastValue.projectName
        }
      }
    },
    submit() {
      this.loadingSubmit = true
      updateAssetManageDetail(this.form).then((res) => {
        this.loadingSubmit = false
        this.$message.success(res.code === '0' ? '更新成功' : '更新失败')
        this.$multiTab.closeIframe(this.$route.path)
      }).catch(() => {
        this.loadingSubmit = false
      })
    },
    cancel() {
      this.$multiTab.closeIframe(this.$route.path)
    }

  },
  beforeRouteEnter(to, from, next) {
    let type = +to.query.isEdit
    if (type === 1) {
      to.meta.title = '资产管理-编辑'
    } else {
      to.meta.title = '资产管理-查看'
    }
    next()
  }
}
</script>
<style scoped lang="less">
.file {
  display: inline-block;
}
.card-container{
  overflow: scroll;
}
/deep/ .ant-form-horizontal .ant-row{
  margin-left: 20px;
}
.wu{
  color: #bfbfbf;
  margin-bottom: 16px;
}
</style>